@extends('admin.layout.app')

@section('title')
    职工管理
@endsection

@section('style')
	<style type="text/css">
		.form-inline .form-control{
			width: 100%;
		}
	</style>
@endsection

@section('content') 
	@component('admin.components.nav') 
	@endcomponent
		<!--main-->
		<main v-cloak>
			<div class="container">
				<div class="breadcrumb">
					<div class="row">
						<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
							<h3>职工管理</h3>
						</div>
						<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
							<form action="" class="form-inline form-search">
								<div class="form-group">
									<select class="form-control" v-model="department_query" @change="getByDepartment">
										<option value=null selected>所有部门</option>
										<option v-for="item in departments" :value="item.id">@{{item.name}}</option>
									</select>
								</div>
								<div class="form-group">
									<label class="sr-only" for="search-input">搜索</label>
									<input id="search-input" type="search" class="form-control" placeholder="输入职工姓名" v-model="keywords">
								</div>
								<button type="button" class="btn btn-primary btn-search" @click="search">搜索</button>
							</form>
						</div>
					</div>
				</div>
				<div class="data-table table-responsive">
					<table class="table table-striped table-hover">
						<thead>
							<tr>
								<th><input type="checkbox" name="" id="checkbox-all" value="" v-model="selectAll"/><label for="checkbox-all"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></label></th>
								{{-- <th>编号</th> --}}
								<th>姓名</th>
								<th>部门</th>
								<th>职位</th>
								<th>联系电话</th>
								<th>职位类型</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in list">
								<th><input type="checkbox" name="" :id="'checkbox-'+item.id" :value="item.id" v-model="selectedList"/><label :for="'checkbox-'+item.id"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></label></th>
								{{-- <th scope="row">@{{item.id}}</th> --}}
								<td>@{{item.name}}</td>
								<td>@{{item.department_name}}</td>
								<td>@{{item.post_name}}</td>
								<td>@{{item.mobile}}</td>
								<td>@{{item.role_name}}</td>
								<td>
									<a @click="openDetails(item)">查看详情</a>
									<a @click="openEdit(item)">编辑</a>
									<a @click="resetPass(item)">重置密码</a>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="action-panel">
					<div class="row">
						<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
							<button type="button" class="btn btn-primary" @click="deleteItems"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>删除</button>
							<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-form"><span class="glyphicon glyphicon-plus" aria-hidden="true" ></span>新增</button>
						</div>
						<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
							<span>共@{{total}}条</span>
							<span>@{{current_page}}/@{{last_page}}页</span>
							<nav class="nav-pager" aria-label="...">
								<ul class="pager">
									<li :class="{disabled:current_page<=1}"><a :disabled="current_page<=1" @click="pageTurn(-1)"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></a></li>
							    	<li :class="{disabled:current_page>=last_page}"><a :disabled="current_page>=last_page" @click="pageTurn(1)"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a></li>
								</ul>
							</nav>
							<form action="" class="form-inline form-pager">
								<div class="form-group">
								    <label for="page-number">跳转到</label>
								    <input type="number" id="page-number" class="form-control" placeholder="" v-model="turn_page">
								</div>
								<button type="button" class="btn btn-primary btn-goto" :disabled="!turn_page || turn_page>last_page" @click="toPage">GO</button>
							</form>
						</div>
					</div>
				</div>
				<div class="modal fade modal-form" tabindex="-1" role="dialog" id="modal-form">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<h4 class="modal-title"></h4>
							</div>
							<div class="modal-body">
								<form class="form-horizontal" action="">
									<div class="row">
										<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
											<div class="form-group">
												<label for="" class="col-sm-3 control-label">姓名</label>
												<div class="col-sm-9">
													<input type="text" class="form-control" id="" placeholder="" v-model="formData.name">
												</div>
											</div>
											<div class="form-group">
												<label for="" class="col-sm-3 control-label">部门</label>
												<div class="col-sm-9">
													<select class="form-control" v-model="formData.department_id">
														<option value="null" disabled selected>请选择</option>
														<option v-for="item in departments" :value="item.id">@{{item.name}}</option>
													</select>
												</div>
											</div>
											<div class="form-group">
												<label for="" class="col-sm-3 control-label">职位</label>
												<div class="col-sm-9">
													<select class="form-control" v-model="formData.post_id">
														<option value="null" disabled selected>请选择</option>
														<option v-for="item in posts" :value="item.id">@{{item.name}}</option>
													</select>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label">职位类型</label>
												<div class="col-sm-9">
													<select class="form-control" v-model="formData.role_id">
														<option value="null" disabled selected>请选择</option>
														<option v-for="item in roles" :value="item.id">@{{item.description}}</option>
													</select>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label">联系电话</label>
												<div class="col-sm-9">
													<input type="tel" class="form-control" id="" placeholder="" v-model="formData.mobile">
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label">账号</label>
												<div class="col-sm-9">
													<input type="text" class="form-control" id="" placeholder="英文字母及数字，6-20位" v-model="formData.username">
												</div>
											</div>
											<div class="form-group" v-if="!current_id">
												<label class="col-sm-3 control-label">密码</label>
												<div class="col-sm-9">
													<input type="password" class="form-control" id="" placeholder="英文字母及数字，6-20位" v-model="formData.password">
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label">详细地址</label>
												<div class="col-sm-9">
													<textarea class="form-control" rows="3"  v-model="formData.address"></textarea>
												</div>
											</div>
										</div>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" data-loading-text="正在提交" @click="submitForm">确认</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal-dialog -->
				</div>
				<!-- /.modal -->
				<div class="modal fade modal-details" tabindex="-1" role="dialog" id="modal-details">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<h4 class="modal-title"></h4>
							</div>
							<div class="modal-body">
								<form action="" class="form-horizontal" v-if="current_item">
									<div class="form-group">
										<label class="col-sm-3 control-label">姓名</label>
										<div class="col-sm-9">
											<p class="form-control-static">@{{current_item.name}}</p>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">地址</label>
										<div class="col-sm-9">
											<p class="form-control-static">@{{current_item.address}}</p>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">账号</label>
										<div class="col-sm-9">
											<p class="form-control-static">@{{current_item.username}}</p>
										</div>
									</div>
									{{-- <div class="form-group">
										<label class="col-sm-3 control-label">密码</label>
										<div class="col-sm-9">
											<p class="form-control-static">@{{current_item.password}}</p>
										</div>
									</div> --}}
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close">关闭</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal-dialog -->
				</div>
				<!-- /.modal -->
			</div>
		</main>
@endsection

@section('script')
		<script type="text/javascript">
			var activeIndex = 2
		</script>
		<script src="/admin/js/nav.js" type="text/javascript"></script>
		<script src="/admin/js/staff.js" type="text/javascript"></script>
@endsection